<template>
  <div class="home">
    <div class="header">
      <img src="../../assets/header.png" alt="" width="100%">
      <!-- 这是头部的导航栏-->
      <div class="header-title">
        <h2 style="margin-right: 2%">发电能力展示系统</h2>
        <Menu mode="horizontal" active-name="1">
          <MenuItem v-for="(item,index) in titles" :name="modifyName(index)">
            {{item.title}}
          </MenuItem>
          <MenuItem name="" style="float: right;">
            登录
          </MenuItem>
        </Menu>
      </div>

    </div>
    <div class="content">
      <div class="content-left">
        <div class="content-left-img">
          <img src="../../assets/map.png" alt="" height="100%">
        </div>

        <!--左侧下放的数据展示-->
        <div class="content-left-footer">
          <div class="content-left-footer-data">
            <div class="item">
              <Icon type="ios-list-box"/>
              风电装机总容量:[{{capacity}}万千瓦]
            </div>
            <div class="item">
              <Icon type="ios-list-box"/>
              光伏装机总容量:[{{capacityOther}}万千瓦]
            </div>
          </div>
          <div class="content-left-footer-table">
            <Table :columns="column" :data="data" size="small"></Table>
          </div>

        </div>
      </div>
      <div class="content-right">
        <div class="item">
          <Emap :options="windOptions"/>
        </div>
        <div class="item">
          <Emap :options="lightOptions"/>
        </div>
        <div class="item">
          <Emap :options="energyOptions"/>
        </div>
      </div>
    </div>
    <div class="footer">
      技术支持：中国电力科学研究院提供技术支持
    </div>
  </div>
</template>

<script>
import { getTable, getTitles } from "../../api";
import Emap from "@/components/Emap";

export default {
  name: "index",
  components: {
    Emap
  },
  data() {
    return {
      titles: [
        { title: "首页" },
        { title: "资源" },
        { title: "功率" },
        { title: "统计分析" },
        { title: "系统设置" }
      ],
      capacity: 222,
      capacityOther: 2223,
      column: [
        { title: "全网出力(万千瓦)", key: "total" },
        { title: "光伏出力(万千瓦)", key: "light" },
        { title: "风电出力(万千瓦)", key: "wind" }
      ],
      data: [{ total: 10, light: 2, wind: 8 }],
      /*风电的曲线配置*/
      windOptions: {
        id: "wind",
        title: {
          text: "风电(MW)",
          left: "center"
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      /* 光伏*/
      lightOptions: {
        id: "light",
        title: { text: "光伏(MW)", left: "center" },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      /*新能源*/
      energyOptions: {
        id: "energy",
        title: { text: "河北新能源(MW)", left: "center" },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  },
  methods: {
    modifyName(index) {
      return index + 1+"";
    },
    async fetchTitles() {
      const result = await getTitles();
      this.titles = result.title;
    },
    async fetchTable() {
      const result = await getTable();
      this.column = result.table.column;
      this.data = result.table.data;
    }
  },
  mounted() {
    // this.fetchTitles();
    // this.fetchTable();
  }
};
</script>

<style scoped lang='less'>
@import "index";
</style>
